<template>
    <div style="padding-left: 20px;">
        <el-collapse accordion @change="handleChanged" v-model="activeName">
            <el-collapse-item v-for="(item, index) in props.dataItem" :key="item.id" class="aaa"
                :class="item.level < 2 ? 'collapse-item-box' : ''" :name="index">
                <template #title>
                    <div class="row common-row-floor collapse-title" style="width: 100%;">
                        <div class="common-name-box" style="flex:1;">
                            <el-input @click.stop.native v-if="item.isSelect" v-model="item.name"
                                :maxlength="item.level == 1 ? 8 : 8" show-word-limit placeholder="请输入"
                                style="width: 80%;" @input="changeMessage"></el-input>
                            <span v-else>{{ item.name }}</span>
                        </div>
                        <!-- 是否显示 -->
                        <div class="common-name-box flex2">
                            <div>
                                <el-switch v-model="item.status" :active-value="1" :inactive-value="0"
                                    active-color="#00BE65" inactive-color="#C8C7C5" @click.stop.native="() => { }"
                                    @change="(val: any) => { selectChange(val, item) }">
                                </el-switch>
                            </div>
                        </div>
                        <div class="common-name-box">
                            <el-button type="text" style="padding: 0;" @click.stop.native="EditItem(item)">{{
                                item.isSelect ? '保存' : '编辑' }}</el-button>
                            <el-button type="text" style="padding: 0;"
                                @click.stop.native="DeleteItem(item, index)">移除</el-button>
                            <el-button type="text" style="padding: 0;" @click.stop.native="UpItem(item, index)"
                                :disabled="!item.id">上移</el-button>
                            <el-button type="text" style="padding: 0;" @click.stop.native="DownItem(item, index)"
                                :disabled="!item.id">下移</el-button>
                        </div>
                    </div>
                </template>
                <div class="row child-row-flex">
                    <div class="flex3 common-name-box">
                        <div @click="AddChild(item)" style="color: #B52427;display: flex;align-items: center;">
                            <el-icon size="16">
                                <CirclePlusFilled />
                            </el-icon>&nbsp;
                            新增细项
                        </div>
                    </div>
                </div>
                <div>
                    <AddChildren :dataItem="item.child" :checkIndex="checkIndex" :key="item.id"
                        :module_id="props.module_id" @getTreeList="getTreeListdata" @forData2="getForData2"
                        @setDate="setDate">
                    </AddChildren>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, h, onMounted, reactive, watch } from 'vue'
import AddChildren from './AddChildren.vue'
import { addNewsCategory, editNewsCategory, delNewsCategory, showNewsCategory, upNewsCategory, downNewsCategory } from '../../Api/Publish'
interface PropsType {
    dataItem?: any
    checkIndex?: string
    module_id?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    dataItem: [],
    checkIndex: '',
    module_id: ''
})
interface EmitType {
    (e: 'getTreeList',val:number): void
    (e: 'forData2'): void
    (e: 'setDate', val: any): void
}
const emit = defineEmits<EmitType>()
const parentIndex = ref<number>(0)
const currentIndex = ref<number>(0)
const activeName = ref<string>('1')
const pid = ref<string>('')
const handleChanged = (val: number) => {
    parentIndex.value = val
}
const getTreeListdata = async () => {
    emit('getTreeList',2)
}
const getForData2 = () => {
    // 子组件接收函数的值
    let value = emit('forData2')
    return value;
}
const setDate = async (val: any) => {
    emit('setDate', val)
}
const selectChange = async (val: any, item: any) => {
    if (item.id) {
        // 是否显示
        let params = {
            id: item.id,
            is_show: item.status,
        }
        const res: any = await showNewsCategory(params)
        if (res.code !== 1) return ElMessage.error(res.msg)
        ElMessage.success(res.msg)
        await getTreeListdata()
    }
}
const EditItem = async (item: any) => {
    // 先查看是否又没保存的
    let num = getForData2() as any
    if (num && !item.isSelect) {
        return ElMessage.success('请先保存在编辑其他分类!')
    }
    if (!item.name) {
        return ElMessage.success('请输入分类名称!')
    }
    if (item.isSelect) {
        // 点击保存
        const params: any = {
            name: item.name,
            pid: Number(item.level) === 1 ? props.module_id : item.pid,
        }
        if (item.id) {
            params.id = item.id
        }
        const res: any = item.id ? await editNewsCategory(params) : await addNewsCategory(params)
        if (res.code !== 1) return ElMessage.error(res.msg)
        ElMessage.success(res.msg)
        await getTreeListdata()
    }
    item.isSelect = !item.isSelect
    // this.$forceUpdate()
}
// 删除分类
const DeleteItem = async (item: any, index: number) => {
    if (item.id) {
        //有id的直接请求接口
        const params = {
            id: item.id
        }
        const res: any = await delNewsCategory(params)
        if (res.code !== 1) return ElMessage.error(res.msg)
        ElMessage.success(res.msg)
        props.dataItem.splice(index, 1)
        setTimeout(async () => {
            await getTreeListdata()
            await forData(props.dataItem, 0)
        }, 1000);
    } else {
        // 自定义删除
        props.dataItem.splice(index, 1)
    }
}
// 上移
const UpItem = async (item: any, index: number) => {
    const params = {
        id: item.id
    }
    const res: any = await upNewsCategory(params)
    if (res.code !== 1) return ElMessage.error(res.msg)
    ElMessage.success(res.msg)
    setTimeout(async () => {
        await getTreeListdata()
        await forData(props.dataItem, 0)
    }, 1000);
}
// 下移
const DownItem = async (item: any, index: number) => {
    const params = {
        id: item.id
    }
    const res: any = await downNewsCategory(params)
    if (res.code !== 1) return ElMessage.error(res.msg)
    ElMessage.success(res.msg)
    setTimeout(async () => {
        await getTreeListdata()
        await forData(props.dataItem, 0)
    }, 1000);
}
// 增加
const AddChild = async (item: any) => {
    await setDate(item.id)
}
const changeMessage = async () => {
}
// 通过递归的方式数组每一层加入层级属性
// 层级从零开始，每调用一次 层级数+1
const forData = async (arr: any, level: number) => {
    level += 1
    for (var i = 0; i < arr.length; i++) {
        var obj = arr[i]
        obj.level = level
        obj.isSelect = false
        if (obj.child) {
            forData(obj.child, level)
        }
    }
}
onMounted(() => {
    forData(props.dataItem, 0)
})
</script>
<style lang="scss" scoped>
.child-row-flex {
    width: 100%;
    height: 45px;
    line-height: 44px;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    padding-left: 30px;
    display: flex;
    align-items: center;
    border-top: 1px solid #EBEEF5;
}

.collapse-title {
    flex: 1;
    order: 1;
}

.el-collapse-item__header {
    flex: 1 0 auto;
    order: -1;
}

.el-collapse-item__header:last-of-type {
    border: none;
}

.common-name-box {
    text-align: left;
}

.common-name-box:last-of-type {
    // width: 100px !important;
}

.common-name-box.flex1 {
    flex: 10;
}

.common-name-box.flex2 {
    width: 236px;
    text-align: center;
}

.common-name-box.flex3 {
    flex: 6;
    text-align: center;
}

:deep(.el-collapse-item__header) {
    height: 44px;
    line-height: 44px;
    border-bottom: none;
}

:deep(.el-collapse) {
    border-bottom: none;
}

:deep(.el-collapse-item__wrap) {
    border-bottom: none;
}

.collapse-item-box {
    border-bottom: 1px solid #EBEEF5;
}

:deep(.el-collapse-item__content) {
    padding-bottom: 0px;
}

:deep(.el-collapse-item) {
    border-bottom: 1px solid #EBEEF5;
}

:deep(.el-collapse-item:last-of-type) {
    border-bottom: none
}

:deep(.el-collapse-item.is-disabled) {
    .el-collapse-item__header {
        cursor: pointer;
        color: #303133;
    }
}

:deep(.is-disabled) {
    .el-input__inner {
        border-color: #DCDFE6 !important;
        background-color: #ffffff !important;
        cursor: pointer !important;
    }
}
</style>
